<template>
  <div class="app-page app-cart">
    <!-- 头部 -->
    <van-nav-bar fixed title="购物车" left-arrow @click-left="$router.go(-1)">
      <template #right>
        <router-link :to="{name: 'search'}"><van-icon name="search" size="27" /></router-link>
      </template>
    </van-nav-bar>
    <!-- 未登录 -->
    <div v-if="!isLogined">
      <router-link tag="div" :to="{name: 'login'}">
        <van-row type="flex" justify="space-between">
          <van-col span="title">登录后享受更多优惠</van-col>
          <van-col span="login">去登录<p class="right-arrow"></p></van-col>
        </van-row>
      </router-link>
     <!-- 空购物车 -->
      <van-empty image-size="100px" class="textcard" description="购物车还是空的" image="https://m.mi.com/static/img/cartnull.daaf7926f8.png">
        <van-button round @click="$router.push({ name: 'home' })" type="danger" class="bottom-button">去逛逛</van-button>
      </van-empty>
      <van-divider>商品推荐</van-divider>
      <recommend-list></recommend-list>
    </div>
    <!-- 登录后 -->
    <div v-else>
      <!-- 有商品时 -->
      <div>
        <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        class="card"
        />
      </div>
      <!-- 空购物车时 -->
      <!-- <van-empty description="购物车还是空的" image="https://m.mi.com/static/img/cartnull.daaf7926f8.png">
        <router-link :to="{name: 'home'}"><van-button round type="danger" class="bottom-button">去逛逛</van-button></router-link>
      </van-empty> -->
      <van-divider>商品推荐</van-divider>
      <recommend-list></recommend-list>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar, Icon, Col, Row, Empty, Divider, Card, Button } from 'vant'
import RecommendList from './componnets/RecommendList.vue'
import { mapGetters } from 'vuex'

Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Col)
Vue.use(Row)
Vue.use(Empty)
Vue.use(Divider)
Vue.use(Card)
Vue.use(Button)

export default {
  name: 'AppCart',
  components: {
    RecommendList
  },
  computed: mapGetters('user', [
    'isLogined'
  ])
}
</script>
<style lang="scss" scoped>
::v-deep.van-nav-bar .van-icon {
    color: #979797;
}
::v-deep .van-nav-bar__arrow {
    margin-right: .04rem;
    font-size: .25rem;
}
::v-deep .van-nav-bar__title {
    max-width: 60%;
    margin: 0 auto;
    color: #666666;
    font-weight: 500;
    font-size: .16rem;
}
::v-deep .van-nav-bar__content {
    background: #f2f2f2;
    height: .5rem;
}
::v-deep .van-col--title {
    float: left;
    box-sizing: border-box;
    text-align: left;
    font-size: .18rem;
    margin-left: .2rem;
    margin-top: .15rem;
    color: #0000008a;
}
::v-deep .van-col--login {
  margin-right: .2rem;
  margin-top: .18rem;
  color: #0000008a;
  display: flex;
  font-size: .12rem;
}
::v-deep .right-arrow{
  content: "";
  flex: 1;
  right: .2rem;
  top: 50%;
  width: .1rem;
  height: .1rem;
  border-left: .01rem solid currentColor;
  border-top: .01rem solid currentColor;
  transform: translate3d(0,-50%,0) rotate(135deg);
  -webkit-transform: translate3d(0,-50%,0) rotate(135deg);
  margin-top: .09rem;
}
::v-deep .van-row--justify-space-between{
  margin-top: .5rem;
  height: .5rem;
}
::v-deep .van-empty{
  background: #ebebeb;
  // display: flex;
  // flex-direction: row;
  // justify-content: center;
  // align-items: center;
}
// ::v-deep .van-empty__image {
//     width: 40px;
//     height: 40px;
//     // padding: 0px;
// }
// ::v-deep .van-empty__image img {
//     width: 40px;
//     height: 40px;
// }
// ::v-deep .van-empty__description {
//     width: 140px;
//     height: 40px;
//     padding: 10px;
//     margin-bottom: 10px;
// }
// ::v-deep .van-empty__bottom {
//     width: 50px;
//     height: 40px;
//     padding: 0px;
//     margin-top: 20px;
// }
::v-deep .bottom-button {
    width: 1.6rem;
    height: .4rem;
}
::v-deep .van-divider{
  font-size: .18rem;
  color: #000;
}
::v-deep .card {
  margin-top: .5rem;
}
::v-deep .textcard {
  text-align: center;
}
::v-deep .van-empty__image img {
  width: 1rem;
  height: 1rem;
  margin-left: -.11rem;
}
// .goods-card {
//     margin: 0;
//     background-color: #fff;
//   }
//   .delete-button {
//     height: 100%;
//   }
</style>
